<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<div class="gv-forms gv-forms-fluid properties" layout="column">
  <div class="gv-forms-header">
    <h1>Properties</h1>
    <span permission permission-only="'api-definition-u'">
      <ng-md-icon icon="settings" ng-click="apiPropertiesCtrl.open()"></ng-md-icon>
    </span>
  </div>
  <div class="gv-form">
    <h2></h2>
    <div class="gv-form-content" layout="column">
      <div layout="row" style="padding-left: 16px" ng-if="dynamicPropertyEnabled">
        <span>
          Dynamic properties service is actually <code>running</code> state and run with cron expression
          <code>{{apiPropertiesCtrl.dynamicPropertyService.schedule}}</code> using
          <code>{{apiPropertiesCtrl.dynamicPropertyService.provider}}</code> provider.
        </span>
      </div>

      <form
        ng-if="apiPropertiesCtrl.hasPropertiesDefined()"
        name="formApiProperties"
        ng-submit="apiPropertiesCtrl.update(apiPropertiesCtrl.api)"
        novalidate
      >
        <md-table-container>
          <table md-table ng-init="reverse = false">
            <thead md-head md-order="name">
              <tr md-row>
                <th md-column>
                  <md-checkbox
                    aria-label="Select all"
                    ng-model="apiPropertiesCtrl.selectAll"
                    ng-change="apiPropertiesCtrl.toggleSelectAll(apiPropertiesCtrl.selectAll)"
                  ></md-checkbox>
                </th>
                <th md-column md-order-by="name" ng-click="reverse = !reverse">Name</th>
                <th md-column>Value</th>
                <th md-column hide-gt-xs show-gt-sm>Dynamic</th>
                <th md-column width="80px" nowrap></th>
              </tr>
            </thead>
            <tbody md-body>
              <tr md-row ng-repeat="property in apiPropertiesCtrl.api.properties|orderBy:name:reverse">
                <td md-cell>
                  <md-checkbox
                    aria-label="Select {{property.key}}"
                    ng-model="apiPropertiesCtrl.selectedProperties[property.key]"
                    ng-change="apiPropertiesCtrl.checkSelectAll()"
                  ></md-checkbox>
                </td>
                <td md-cell>{{property.key}}</td>
                <td
                  permission
                  permission-only="'api-definition-u'"
                  md-cell
                  ng-click="apiPropertiesCtrl.editValue($event, property)"
                  ng-class="{'gravitee-placeholder': property.value}"
                >
                  {{property.value || 'Set value'}}
                </td>
                <td permission permission-except="'api-definition-u'">{{property.value}}</td>
                <td md-cell hide-gt-xs show-gt-sm>
                  <ng-md-icon ng-show="property.dynamic" icon="check"></ng-md-icon>
                </td>
                <td md-cell>
                  <ng-md-icon
                    permission
                    permission-only="'api-definition-d'"
                    ng-show="!property.dynamic"
                    ng-click="apiPropertiesCtrl.deleteProperty(property.key)"
                    icon="delete"
                  ></ng-md-icon>
                </td>
              </tr>
            </tbody>
          </table>
        </md-table-container>
        <div class="md-actions gravitee-api-save-button" layout="row">
          <md-button
            class="md-raised md-warn float-right"
            type="button"
            ng-click="apiPropertiesCtrl.deleteSelectedProperties()"
            permission
            permission-only="['api-definition-u']"
            ng-disabled="!apiPropertiesCtrl.hasSelectedProperties()"
          >
            Delete
          </md-button>
        </div>
      </form>

      <gravitee-empty-state
        ng-if="!apiPropertiesCtrl.hasPropertiesDefined()"
        icon="assignment"
        model="Property"
        message="Properties will appear here"
        sub-message="Start creating a property"
        create-mode="true"
      ></gravitee-empty-state>

      <div ng-style="!apiPropertiesCtrl.hasPropertiesDefined() && {'text-align':'center'}">
        <md-button
          permission
          permission-only="'api-definition-u'"
          ng-class="{'md-fab-bottom-right': apiPropertiesCtrl.hasPropertiesDefined()}"
          class="md-fab"
          aria-label="Add"
          ng-click="apiPropertiesCtrl.showPropertyModal()"
        >
          <ng-md-icon icon="add"></ng-md-icon>
        </md-button>
      </div>

      <div flex></div>

      <md-sidenav class="md-sidenav-right md-whiteframe-z2 healthcheck" md-component-id="dynamic-properties-config">
        <md-toolbar>
          <div class="md-toolbar-tools">
            <h2 style="color: white">
              <span>Dynamic properties settings</span>
            </h2>
            <span flex></span>
            <md-switch
              ng-model="dynamicPropertyEnabled"
              ng-disabled="formDynamicProperties.$invalid"
              ng-change="apiPropertiesCtrl.switchEnabled()"
              class="md-block"
              aria-label="Enable dynamic-property service"
            ></md-switch>
          </div>
        </md-toolbar>

        <md-content layout-padding>
          <div style="margin-left: 7px; font-style: italic; border-left: 2px solid #b1bdc5">
            <span>This service is requiring an API deployment.</span><br />
            <span>Do not forget to deploy API to start dynamic-properties service.</span>
          </div>

          <form name="formDynamicProperties" ng-submit="apiPropertiesCtrl.update()" novalidate>
            <h4>Polling frequency</h4>

            <md-input-container flex class="md-block">
              <gv-cron-editor
                required
                ng-value="apiPropertiesCtrl.dynamicPropertyService.schedule"
                ng-on-input="apiPropertiesCtrl.updateSchedule($event)"
                label="Schedule"
              ></gv-cron-editor>

              <div class="hint">A cron expression to schedule the health check</div>
            </md-input-container>

            <br />

            <h4>Provider</h4>
            <div layout="row" layout-sm="column">
              <md-input-container class="md-block" flex-gt-xs>
                <label>Type</label>
                <md-select
                  ng-model="apiPropertiesCtrl.dynamicPropertyService.provider"
                  placeholder="Type"
                  required
                  ng-required="true"
                  ng-change="apiPropertiesCtrl.onProviderTypeChange()"
                >
                  <md-option ng-repeat="provider in apiPropertiesCtrl.dynamicPropertyProviders" ng-value="provider.id"
                    >{{provider.name}}</md-option
                  >
                </md-select>
              </md-input-container>
            </div>

            <br />

            <div ng-if="apiPropertiesCtrl.dynamicPropertyService.provider">
              <h4>
                Configuration

                <md-button
                  ng-if="apiPropertiesCtrl.dynamicPropertyService.provider == 'HTTP'"
                  class="md-icon-button"
                  aria-label="Expected HTTP provider output"
                  ng-click="apiPropertiesCtrl.showExpectedProviderOutput()"
                >
                  <ng-md-icon class="no-top" icon="info" style="fill: #b1bdc5"></ng-md-icon>
                </md-button>
              </h4>

              <div ng-if="apiPropertiesCtrl.dynamicPropertyService.provider == 'HTTP'" layout="column" layout-sm="column">
                <md-input-container class="md-block" flex-gt-sm>
                  <label>HTTP Service URL</label>
                  <input ng-model="apiPropertiesCtrl.dynamicPropertyService.configuration.url" type="url" ng-required="true" />
                </md-input-container>

                <md-input-container class="md-block" flex-gt-sm>
                  <label>HTTP Method</label>
                  <md-select
                    ng-model="apiPropertiesCtrl.dynamicPropertyService.configuration.method"
                    placeholder="HTTP Methods"
                    required
                    ng-required="true"
                  >
                    <md-option ng-value="method" ng-repeat="method in apiPropertiesCtrl.getHttpMethods()">{{method}}</md-option>
                  </md-select>
                </md-input-container>

                <div layout="column" layout-sm="column" style="margin-bottom: 15px">
                  <h5 style="color: grey">
                    <span>Headers</span>
                    <ng-md-icon
                      icon="add_circle_outline"
                      style="fill: #b1bdc5"
                      aria-label="Add HTTP header"
                      ng-click="apiPropertiesCtrl.addHTTPHeader()"
                      >Add headers</ng-md-icon
                    >
                  </h5>
                  <div
                    layout="row"
                    layout-sm="column"
                    layout-align="center center"
                    ng-repeat="header in apiPropertiesCtrl.dynamicPropertyService.configuration.headers"
                  >
                    <ng-md-icon
                      icon="remove_circle_outline"
                      style="fill: #b1bdc5"
                      aria-label="Delete header"
                      ng-click="apiPropertiesCtrl.removeHTTPHeader($index)"
                    ></ng-md-icon>

                    <div flex="5" hide-xs hide-sm>
                      <!-- Spacer //-->
                    </div>

                    <md-input-container flex-gt-sm>
                      <input aria-label="Header name" ng-model="header.name" type="text" placeholder="Header name" ng-required="true" />
                    </md-input-container>

                    <div flex="5" hide-xs hide-sm>
                      <!-- Spacer //-->
                    </div>

                    <md-input-container flex-gt-sm>
                      <input aria-label="Header value" ng-model="header.value" type="text" placeholder="Header value" ng-required="true" />
                    </md-input-container>
                  </div>
                </div>

                <md-input-container class="md-block" flex-gt-sm>
                  <label style="transform: translate3d(0, 6px, 0) scale(0.75) !important"> Request body </label>

                  <textarea
                    ui-codemirror="{ onLoad : apiPropertiesCtrl.codemirrorLoaded }"
                    ui-codemirror-opts="apiPropertiesCtrl.requestBodyOptions"
                    ng-model="apiPropertiesCtrl.dynamicPropertyService.configuration.body"
                    rows="5"
                  ></textarea>
                </md-input-container>

                <md-input-container class="md-block" flex-gt-sm>
                  <label style="transform: translate3d(0, 6px, 0) scale(0.75) !important"> Transformation (JOLT Specification) </label>

                  <textarea
                    ui-codemirror="{ onLoad : apiPropertiesCtrl.codemirrorLoaded }"
                    ui-codemirror-opts="apiPropertiesCtrl.joltSpecificationOptions"
                    ng-model="apiPropertiesCtrl.dynamicPropertyService.configuration.specification"
                    ng-required="true"
                    rows="5"
                  ></textarea>
                </md-input-container>
              </div>

              <br />
            </div>

            <md-divider></md-divider>

            <div class="md-actions gravitee-api-save-button" layout="row">
              <md-button class="md-accent" type="submit" ng-disabled="formDynamicProperties.$invalid || formDynamicProperties.$pristine">
                Save
              </md-button>
              <md-button
                class="md-warn"
                type="button"
                ng-click="apiPropertiesCtrl.reset()"
                ng-disabled="formDynamicProperties.$invalid || formDynamicProperties.$pristine"
              >
                Reset
              </md-button>
            </div>
          </form>
        </md-content>
      </md-sidenav>
    </div>
  </div>
</div>
